<template>
  <div>
    <el-collapse-transition>
      <div
        v-show="!isShowDetail"
        v-loading="loading"
        element-loading-text="识别中"
        class="app-main-content-box"
      >
        <AppMainTitle title="预订查询" />
        <div class="verify-content flexCCC">
          <el-input
            ref="inputs"
            v-model.trim="orderNo"
            size="medium"
            style="ime-mode:inactive;width:400px;"
            inputmode="numeric"
            clearable
            placeholder="请输入预订单号"
            maxlength="50"
            show-word-limit
            @keyup.enter.native="search"
          />
          <el-button
            :disabled="orderNo===''"
            type="primary"
            style="margin-top:30px"
            size="medium"
            round
            @click="search"
          >查询
          </el-button>
        </div>
      </div>
    </el-collapse-transition>
    <!-- 详情 -->
    <el-collapse-transition>
      <order-detail v-show="isShowDetail" ref="orderDetail" />
    </el-collapse-transition>
  </div>
</template>

<script>
import OrderDetail from '@/views/bookingModule/views/components/OrderDetail'
import { getOrderDetail } from '@/views/bookingModule/api/record'

export default {
  components: {
    OrderDetail
  },
  data() {
    return {
      // 状态
      loading: false,
      isShowDetail: false,
      // 数据
      orderNo: ''
    }
  },
  mounted() {
    this.$nextTick(x => {
      this.$refs.inputs.focus()
    })
  },
  methods: {
    /**
     * 按钮组
     */
    // 获取输入的code纯数字
    getCode(code) {
      return code.replace(/[^0-9]/ig, '')
    },
    //  搜索
    search() {
      if (this.orderNo) {
        const code = this.getCode(this.orderNo)
        this.loading = true
        getOrderDetail({ orderNo: code })
          .then(res => {
            this.openOrderDetail(res.data)
          })
          .finally(() => {
            this.loading = false
          })
      }
    },

    // 打开详情
    openOrderDetail(data) {
      this.isShowDetail = true
      const code = this.getCode(this.orderNo)
      this.$refs.orderDetail.open({ orderNo: code, data }).then(() => {
        this.isShowDetail = false
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.verify-content {
  min-height: 300px;
  ::v-deep .el-input__suffix{
    line-height: 36px;
  }
}
</style>
